<template>
  <el-container>
    <el-main class="leftMain">
      <system-tree
        :show-tabs="false"
        :show-device-index="false"
        :first-action="false"
        :second-action="false"
      ></system-tree>
    </el-main>
    <el-main class="rightMain">
      <bs-main class="bsMain">
        <operation-log-condition
          ref="logFilter"
          slot="header"
          @filter-loglist="fliterList"
        ></operation-log-condition>
        <list
          ref="rightTable"
          class="right"
          :list-data="logList"
          :has-select="false"
          :list-cols="columns"
          :action-opts="actionOpts"
          :table-tag="tableName"
          :init-headmune-flag="initHeadmuneFlag"
          :init-cols-props.sync="initColsProps"
          height="calc(100vh - 220px)"
          @sort="handleSort"
          @init-table="initTable"
        >
        </list>
        <pagination
          slot="footer"
          :total="pageData.total"
          :page="pageData.page"
          :limit="pageData.limit"
          @pagination="loadLogList"
        ></pagination>
      </bs-main>
    </el-main>
  </el-container>
</template>
<script>
import Pagination from '@/components/Pagination'
import SystemTree from '../SystemTree'
import OperationLogCondition from './components/OperationLogCondition'
import List from '@/components/List'
export default {
  components: {
    List,
    SystemTree,
    OperationLogCondition,
    Pagination,
  },
  data() {
    const headerContextMenus = {
      width: '120px',
      items: ['sortUp', 'sortDown', 'line', 'cols', 'line'],
    }
    return {
      orgProps: {
        children: 'childUser',
        label: 'username',
      },
      pageData: {
        total: 0,
        page: 1,
        limit: 15,
      },
      initHeadmuneFlag: false,
      treeLoading: false,
      treeData: [
        {
          childUser: [],
          username: this.$t('所有用户'),
        },
      ],
      defaultCheckedKeys: [],
      contextMenuData: [],
      logList: [],
      columns: [
        { label: this.$t('操作时间'),  prop:'createTime', minwidth: 150, headerContextMenus },
        { label: this.$t('登录名'),  prop:'username', minwidth: 90, headerContextMenus },
        { label: this.$t('昵称'),  prop:'nikeName', minwidth: 100 },
        { label: this.$t('角色'),  prop:'roleName', minwidth: 100 },
        { label: this.$t('操作类型'),  prop:'event', minwidth: 100, headerContextMenus },
        { label: this.$t('操作内容'),  prop:'desc', align: 'left', minwidth: 400, headerContextMenus },
        { label: 'IP',  prop:'ip', minwidth: 110, headerContextMenus }
      ],
      initColsProps: ['createTime', 'username', 'nikeName', 'roleName', 'event', 'desc', 'ip'],
      actionOpts: {
        show: false,
      },
      requestParams: {},
      tableName: 'logTable',
    }
  },
  mounted() {
    this.$nextTick(() => {
    })
  },
  created() {
    this.$eventBus.$on('doLoadList', this.doLoadList)
  },
  beforeDestroy() {
    this.$eventBus.$off('doLoadList')
  },
  methods: {
    doLoadList(node) {
      this.$refs.logFilter.currentNode(node)
    },

    //日期筛选日志列表
    fliterList(params) {
      this.requestParams = {}
      if (params.endTime) {
        this.requestParams.endTime = params.endTime
      }
      if (params.startTime) {
        this.requestParams.startTime = params.startTime
      }
      if (params.username) {
        this.requestParams.username = params.username
      }
      if(params.queryParam) {
        this.requestParams.desc = params.queryParam
      }
      this.pageData.page = 1
      this.pageData.limit = 15
      this.loadLogList()
    },
    loadLogList(current) {
      if (current) {
        this.pageData = {
          ...this.pageData,
          ...current,
        }
      }
      this.requestParams.size = this.pageData.limit
      this.requestParams.current = this.pageData.page
      this.$store
        .dispatch('system/userOperationLog', this.requestParams)
        .then((res) => {
          this.logList = res.records ? res.records : []
          this.pageData.total = res.total ? Number(res.total) : 0
        })
        .catch(() => {})
    },
    //--------------table 筛选处理-----------------
    initTable(config) {
      this.initHeadmuneFlag = true
      if (config.sort) {
        if (config.sort.type) {
          this.requestParams.orderParam = config.sort.type
        }
        if (config.sort.orderType) {
          this.requestParams.orderType = config.sort.orderType
        }
      }
    },

    handleSort(sortInfo) {
      this.requestParams.orderParam = sortInfo.type
      switch (sortInfo.prop) {
        case 'desc':
          this.requestParams.orderType = 1
          break
        case 'createTime':
          this.requestParams.orderType = 2
          break
        case 'username':
          this.requestParams.orderType = 3
          break
        case 'event':
          this.requestParams.orderType = 4
          break
        case 'ip':
          this.requestParams.orderType = 5
          break
        default:
          break
      }
      this.loadLogList()
    },
  },
}
</script>
<style lang="scss" scoped>
::v-deep .el-tree-node {
  position: relative;
  padding-left: 10px;
}
</style>
